<template>
  <div>
    <h3>员工修改</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">员工编号</td>
          <td><input type="text" v-model="info.Code" disabled /></td>
        </tr>
        <tr>
          <td align="right">员工姓名</td>
          <td><input type="text" v-model="info.WorkName" /></td>
        </tr>
        <tr>
          <td align="right">员工头像</td>
          <td>
            <input type="file" @change="img" />
            <img :src="info.Photo" width="100" height="100" alt="" />
          </td>
        </tr>
        <tr>
          <td align="right">员工状态</td>
          <td>
            <input
              type="radio"
              name="state"
              :value="true"
              v-model="info.State"
            />开启
            <input
              type="radio"
              name="state"
              :value="false"
              v-model="info.State"
            />禁用
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="确定"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
//修改需要传递的数据

let info: any = reactive({
  Id: route.query.id,
  WorkName: '',
  Code: '',
  Photo: '',
  State: true,
});

onMounted(() => {
  getData();
});

//2.数据返填;
const getData = () => {
  axios({
    url: '/api/Tests/GetTestModelS',
    method: 'get',
    params: {
      id: route.query.id,
    },
  })
    .then((res) => {
      console.log(res);
      Object.assign(info, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

//图片上传

const img = (e: any) => {
  //1.获取图片文件
  console.log(e);

  let obj = e.target.files[0];
  //2.转成formData
  let f = new FormData();
  f.append('file', obj);
  //3.发送网络请求
  axios({
    url: '/api/Uploads/UploadImg',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data == '不是图片') {
        alert('您上传的不是图片');
        return;
      }
      if (res.data == '大于2M') {
        alert('您上传的图片大于2M');
        return;
      }

      info.Photo = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//确认修改
const ok = () => {
  //1.判断有效性
  if (info.WorkName == '') {
    alert('员工名称不能为空');
    return;
  }
  if (info.Photo == '') {
    alert('员工头像不能为空');
    return;
  }
  //2.发送网络请求
  axios({
    url: '/api/Tests/UpdateTestOk',
    method: 'put',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        router.push('/testList');
      } else if (res.data == -1) {
        alert('员工名称重复');
        return;
      } else {
        alert('修改失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
